<template>

  <!--首页 店铺数据 自定义显示的指标 -->
  <el-dialog class="pick-dialog" title="自定义指标" :visible.sync="dialogVisible" :close-on-click-modal="false" width="860px">
    <div class="form-box">
      <!-- <el-transfer :titles="['首页未添加', '首页已添加']"
      :button-texts="['从首页移除', '添加到首页']" @change="handleChange" v-model="valueArr" :data="allData"></el-transfer> -->
      <div style="color: #666;margin-bottom: 10px;">
        提示： <span style="color: red;">拖动</span> 指标改变指标位置，可以拖动到隐藏区域或显示区域。
      </div>
      <div class="card-box">
        <div class="yitianjia" style="margin-bottom: 20px;">
          <el-card class="box-card" >
            <div slot="header">
              <b style="color: green;font-size: 16px;">显示的指标</b>
            </div>
            <draggable style="min-height: 100px;" v-model="valueArr"  group="lists"  animation="300" @end="onEnd">

              <template v-if="valueArr&&valueArr.length">
                <template v-for="(o,i) in valueArr">
                  <span v-if="o.label" :key="i" class="item_label">
                    <el-button type="primary" >{{ o.label }}</el-button>
                  </span>
                </template>
              </template>
              <div v-else style="line-height: 100px;font-size: 20px;color: #999;text-align: center;">
                暂无指标
              </div>
            </draggable>
          </el-card>
          </div>
        <div class="weitianjia">
          <el-card class="box-card" >
            <div slot="header">
              <b style="color: #666;font-size: 16px;">隐藏的指标</b>
            </div>
            <!-- :group="{ name: 'lists', pull: 'move', put: 'move' }"  -->
            <draggable style="min-height: 100px;" group="lists" v-model="unAddList"  animation="300" @end="onEnd">
              <template v-if="unAddList&&unAddList.length">
                <template v-for="(o,i) in unAddList">
                  <span v-if="o.label" :key="i" class="item_label">
                    <el-button type="primary" >{{ o.label }}</el-button>
                  </span>
                </template>
              </template>
              <div v-else style="line-height: 100px;font-size: 20px;color: #999;text-align: center;">
                暂无指标
              </div>
              
            </draggable>
            
          </el-card>
        </div>
        

      </div>
      
     
      <div class="center">
        <el-button @click="close('ruleForm')">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  getuserDataUpdateList

} from "@/api/tenantApis/indexStatistics.js";
//导入draggable组件
import draggable from "vuedraggable";
export default {
  name: "",
  components:{draggable},
  data() {
    return {
      dialogVisible: false,
      loading: false,
      valueArr:[],
      allData:[],
      unAddList:[]
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    }
  },
  methods: {
    open(valueArr) {
      // console.log("%c Line:35 🍞 valueArr", "color:#7f2b82", valueArr);
      this.loading = false
      this.dialogVisible = true;
      if(valueArr&&valueArr.length){
        
        this.valueArr = [...valueArr]
      }
      this.getAllData()
    },
    handleChange(e){
      console.log("%c Line:44 🍯 e", "color:#ffdd4d", e);
      this.valueArr
      console.log("%c Line:46 🍣 this.valueArr", "color:#7f2b82", this.valueArr);

    },
    // 
    getAllData(){
      this.unAddList = []
      let allDataMap = {...this.commonMaps.shopDataMap}
      this.allData = Object.values(this.commonMaps.shopDataMap)
      if(this.valueArr&&this.valueArr.length){
        this.valueArr.forEach(r=>{
          if(allDataMap[r.key]){
            delete allDataMap[r.key]

          }
        })
      }
      this.unAddList = Object.values(allDataMap)
    },
    onEnd(){
      // this.unAddList
      // console.log("%c Line:105 🍕 this.unAddList", "color:#e41a6a", this.unAddList);
      // this.valueArr
      // console.log("%c Line:107 🍿 this.valueArr", "color:#ed9ec7", this.valueArr);
    },
    submitForm(){
      const list = []
      if(this.valueArr.length){
        this.valueArr.forEach((item,i)=>{
          list.push({
            userId:this.userInfo.userId,
            dataKey:item.key,
            tenantId:this.userInfo.tenantId,
            sort:i,
            type:1
          })
        })
      }
      getuserDataUpdateList(list).then(res=>{
        console.log("%c Line:137 🌰 res", "color:#ea7e5c", res);
        this.$message.success(res.msg)
        this.$emit('saveSuccess')
        this.close()

      })


    },
   
    close(formName) {
      this.dialogVisible = false
    }
  }
};
</script>
<style scoped lang="scss">
.center{
  margin-top: 15px;
}

.item_label{
  // cursor: pointer;
  // border: 1px solid #6C5DD3;
  // border-radius: 4px;
  // padding: 0 10px;
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;

}
</style>
